import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'; // 引入 Node.js 的 path 模块来处理路径
import Icons from 'unplugin-icons/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import IconsResolver from 'unplugin-icons/resolver'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons' // 引入 svg需要用到的插件
import Inspect from 'vite-plugin-inspect'
import dynamicImportVars from 'vite-plugin-dynamic-import-vars';

const extensions = ['.ts', '.vue', '.js'];
const pathSrc = resolve(__dirname, 'src')
// https://vitejs.dev/config/
export default defineConfig({
    base: '/',   // 打包时，静态资源存放的目录 这地方一点要写对，不然路由设置为createWebHistory是，
    // 访问的时候会白屏，出现Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html".
    // Strict MIME type checking is enforced for module scripts per HTML spec.
    build: {
        outDir: 'dist',
        assetsDir: 'static',
        sourcemap: true,
        terserOptions: {
            // 生产环境移除console
            compress: {
                drop_console: true,
                drop_debugger: true,
            },
        },
    },
    server: {
        host: '0.0.0.0', // 配置监听本机所有ip地址
        port: 5173,
        open: true, // 自动打开浏览器
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8888',
                changeOrigin: true,
                //rewrite: (path) => path.replace(/^\/api/, ''),  // 去除 /api 前缀 在我后端gin代码中不能去除
                rewrite: (path) => path, 
            },
        },
    },
    plugins: [
        vue(),
        dynamicImportVars({
            include: extensions, // 根据需要调整包含的文件类型
        }),
        AutoImport({
            // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
            imports: ['vue'],
            // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
            resolvers: [
                ElementPlusResolver(),
                // 自动导入图标组件
                IconsResolver({
                    prefix: 'Icon',
                }),
            ],
            dts: resolve(pathSrc, 'auto-imports.d.ts'),
        }),
        Components({
            resolvers: [
                // 自动注册图标组件
                IconsResolver({
                    enabledCollections: ['ep'],
                }),
                // 自动导入 Element Plus 组件
                ElementPlusResolver()
            ],
            dts: resolve(pathSrc, 'components.d.ts'),
        }),
        Icons({
            autoInstall: true,
        }),
        Inspect(),
        createSvgIconsPlugin({

            // 指定需要缓存的图标文件夹
            iconDirs: [resolve(process.cwd(), 'src/assets/icons')],

            // 指定symbolId格式
            symbolId: 'icon-[dir]-[name]',
        }),
    ],
    // 配置别名
    resolve: {
        alias: {
            '@': resolve(__dirname, 'src'), // 配置 '@' 别名指向 'src' 目录
        }
    },
    //scss全局变量的配置
    css: {
        preprocessorOptions: {
            scss: {
                javaScriptEnabled: true,
                additionalData: `@import "@/assets/styles/variable.scss";`
            }
        }
    }
})
